<template>
  <d2-container>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="客户号资金表" name="first">
        <el-card shadow="never" class="d2-mb">
          <el-form
            ref="first_form"
            :inline="true"
            :model="first_form"
            label-width="80px"
          >
            <el-form-item label="客户号:">
              <!-- <el-input v-model="first_form.account_code" /> -->
              <el-select
                v-model="first_form.account_code"
                placeholder="请选择"
                clearable
              >
                <el-option
                  v-for="item in first_select_list_khh"
                  :key="item.account"
                  :label="item.account"
                  :value="item.account"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="日期:">
              <el-date-picker
                type="date"
                v-model="first_form.start_date"
                placeholder="开始日期"
                value-format="yyyy-MM-dd"
                clearable
              ></el-date-picker>
              -
              <el-date-picker
                type="date"
                clearable
                v-model="first_form.end_date"
                placeholder="结束日期"
                value-format="yyyy-MM-dd"
              ></el-date-picker>
            </el-form-item>

            <el-button size="small" @click="select_fn" style="margin-top: 3px;"
              >查询</el-button
            >
          </el-form>
        </el-card>
        <div class="mb">
          <el-button
            style="margin-top: 5px;"
            size="small"
            @click="$router.go('-1')"
            >返回上级</el-button
          >
          <el-button size="small">导出</el-button>
          <el-button size="small">打印</el-button>
        </div>
        <el-card shadow="never" class="d2-mb">
          <template slot="header" style="height: 66px">
            <span class="title_x el-button--primary fl"></span>
            <p class="title_l fl">客户号资金表</p>
          </template>
          <el-table
            border
            :data="first_tableData"
            :cell-style="{ 'text-align': 'center' }"
            :header-cell-style="{
              background: '#eef1f6',
              'text-align': 'center'
            }"
            style="width: 100%"
          >
            <el-table-column
              label="序号"
              type="index"
              width="50"
            ></el-table-column>
            <el-table-column
              prop="TradingDay"
              label="日期"
              sortable
            ></el-table-column>
            <!-- <el-table-column prop="name" label="机构名称"></el-table-column>
            <el-table-column prop="name" label="部门名称"></el-table-column> -->
            <el-table-column
              prop="AccountCode"
              label="客户号"
            ></el-table-column>
            <!-- <el-table-column prop="name" label="币种"></el-table-column> -->
            <el-table-column
              prop="BalanceBF"
              label="期初结存"
            ></el-table-column>
            <el-table-column
              prop="CloseProfit"
              label="平仓盈亏"
            ></el-table-column>
            <el-table-column prop="Commission" label="手续费"></el-table-column>
            <el-table-column
              prop="PremiumReceived"
              label="权利金收支"
              width="95"
            ></el-table-column>
            <el-table-column
              prop="DepositAndWithdrawal"
              label="收入金"
            ></el-table-column>
            <el-table-column
              prop="BalanceCF"
              label="期末结存"
            ></el-table-column>
            <el-table-column
              prop="CurrMargin"
              label="保证金占用"
              width="95"
            ></el-table-column>
            <el-table-column
              prop="RiskDegree"
              label="保证金占用比例"
              width="120"
            ></el-table-column>
          </el-table>
          <div class="block">
            <el-pagination
              @current-change="handleCurrentChange_first"
              :current-page="first_form.page"
              :page-size="first_form.pageSize"
              layout="total, prev, pager, next, jumper"
              :total="first_form.pageTotal"
            >
            </el-pagination>
          </div>
        </el-card>
      </el-tab-pane>
      <el-tab-pane label="客户号保证金占用比例" name="second">
        <el-card shadow="never" class="d2-mb">
          <el-form
            ref="second_form"
            :inline="true"
            :model="second_form"
            label-width="80px"
          >
            <el-form-item label="客户号:">
              <!-- <el-input v-model="first_form.account_code" /> -->
              <el-select
                v-model="second_form.account_code"
                placeholder="请选择"
                clearable
              >
                <el-option
                  v-for="item in first_select_list_khh"
                  :key="item.account"
                  :label="item.account"
                  :value="item.account"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="日期:">
              <el-date-picker
                type="date"
                v-model="second_form.start_date"
                placeholder="开始日期"
                value-format="yyyy-MM-dd"
                clearable
              ></el-date-picker>
              -
              <el-date-picker
                type="date"
                clearable
                v-model="second_form.end_date"
                placeholder="结束日期"
                value-format="yyyy-MM-dd"
              ></el-date-picker>
            </el-form-item>
            <el-button size="small" @click="second_select_tableData()"
              >查询</el-button
            >
          </el-form>
        </el-card>
        <el-card shadow="never" class="d2-mb">
          <template slot="header" style="height: 66px">
            <span class="title_x el-button--primary fl"></span>
            <p class="title_l fl">客户号保证金占用比例走势</p>
          </template>
          <div
            id="second_main"
            style="width:1200px;height:400px;margin:0 auto;"
          ></div>
        </el-card>
      </el-tab-pane>
      <el-tab-pane label="策略总资金占用" name="third">
        <el-card shadow="never" class="d2-mb">
          <el-form ref="third_form" :model="third_form" :inline="true">
            <el-form-item label="策略ID:">
              <!-- <el-input placeholder="请输入内容" v-model="form.strategy_id" clearable></el-input> -->
              <el-select
                v-model="third_form.strategy_id"
                filterable
                placeholder="请选择"
                clearable
              >
                <el-option
                  v-for="item in options_list"
                  :key="item.strategy_id"
                  :label="item.strategy_id"
                  :value="item.strategy_id"
                >
                  <span style="float: left">{{ item.strategy_id }}</span>
                  <span style="float: right; color: #8492a6; font-size: 13px">{{
                    item.strategy_name
                  }}</span>
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="策略名称:">
              <el-input v-model="third_form.strategy_name" />
            </el-form-item>
            <el-form-item label="日期:">
              <el-date-picker
                type="date"
                v-model="third_form.start_date"
                placeholder="开始日期"
                value-format="yyyy-MM-dd"
                clearable
              ></el-date-picker>
              -
              <el-date-picker
                type="date"
                v-model="third_form.end_date"
                placeholder="结束日期"
                value-format="yyyy-MM-dd"
                clearable
              ></el-date-picker>
            </el-form-item>
            <el-form-item>
              <el-button size="small" @click="select_third_datas"
                >查询</el-button
              >
            </el-form-item>
          </el-form>
        </el-card>
        <div class="mb">
          <el-button
            size="small"
            @click="$router.push('/fund_analysis_details')"
            >策略明细</el-button
          >
          <el-button size="small" @click="$router.go('-1')">返回上级</el-button>
        </div>
        <el-card shadow="never" class="d2-mb">
          <template slot="header" style="height: 66px">
            <span class="title_x el-button--primary fl"></span>
            <p class="title_l fl">策略总资金占用</p>
          </template>
          <div
            id="main_third"
            style="width:1200px;height:400px;margin:0 auto;"
          ></div>
        </el-card>
      </el-tab-pane>
    </el-tabs>
  </d2-container>
</template>
<script>
import {
  getAccount_cap,
  getReport_profit_loss,
  getReport_strategy_caps
} from "@/api/url";
export default {
  data() {
    return {
      activeName: "first",
      //第一块
      first_form: {
        account_code: "",
        start_date: "",
        end_date: "",
        page: 1,
        pageSize: 20,
        pageTotal: 0
      },
      first_tableData: [],
      first_select_list_khh: [],
      //第二块
      second_form: {
        account_code: "",
        start_date: "",
        end_date: "",
        branch: "nopage"
      },
      //第三块
      options_list: [],
      third_form: {
        strategy_id: "",
        strategy_name: "",
        start_date: "",
        end_date: "",
        data_type: "chart",
        page: 1,
        pageSize: 20,
        pageTotal: 0
      },
      form_list: {
        strategy_id: "",
        strategy_name: "",
        department_name: "",
        start_date: "",
        end_date: "",
        request_type: "strategy_list"
      }
    };
  },
  created() {
    this.select_first_tableData();
    getAccount_cap({
      branch: "account"
    }).then(res => {
      this.first_select_list_khh = res.result;
    });
    // 第三块下拉框
    getReport_profit_loss(this.form_list).then(res => {
      this.options_list = res.result;
    });
    // var dt = new Date();
    // this.third_form.start_date = this.formatDate_ss(dt);
    this.select_third_datas();
  },
  methods: {
    // formatDate_ss(dt) {
    //   if (!dt) {
    //     dt = new Date();
    //   }
    //   var year = dt.getFullYear();
    //   var month = dt.getMonth() + 1;
    //   var date = dt.getDate();
    //   if (month < 10) {
    //     // 强制类型转换
    //     month = "0" + month;
    //   }
    //   if (date < 10) {
    //     // 强制类型转换
    //     date = "0" + date;
    //   }
    //   // 强制类型转换
    //   return year + "-" + month + "-" + date;
    // },
    handleClick(tab, event) {
      if (tab.name == "first") {
        this.select_fn();
      } else if (tab.name == "second") {
        this.second_form.account_code = this.first_select_list_khh[0].account;
        this.second_select_tableData();
      } else if (tab.name == "third") {
        this.select_third_datas();
      }
    },
    //第一块
    select_first_tableData() {
      if (this.first_form.start_date == null) {
        this.first_form.start_date = "";
      }
      if (this.first_form.end_date == null) {
        this.first_form.end_date = "";
      }
      getAccount_cap(this.first_form).then(res => {
        this.first_tableData = res.result.results;
        this.first_form.pageTotal = res.result.count;
      });
    },
    select_fn() {
      this.first_form.page = 1;
      this.select_first_tableData();
    },
    handleCurrentChange_first(val) {
      this.first_form.page = val;
      this.select_first_tableData();
    },
    // 第二块
    handleCurrentChange(val) {
      console.log("换页发送请求");
    },
    second_select_tableData() {
      getAccount_cap(this.second_form).then(res => {
        let second_dataone = [];
        let second_datatwo = [];
        res.result.forEach(item => {
          second_dataone.push(item.TradingDay);
          let a = this.toPoint(item.RiskDegree).toFixed(6);
          second_datatwo.push(a);
        });
        this.$nextTick(() => {
          this.drawChart_second(second_dataone, second_datatwo);
        });
      });
    },
    //百分百转小数
    toPoint(percent) {
      var str = percent.replace("%", "");
      str = str / 100;
      return str;
    },
    drawChart_second(datasone, datastwo) {
      let myChart = this.$echarts.init(document.getElementById("second_main"));
      myChart.setOption({
        title: {
          text: "保证金占用比例",
          left: "center"
        },
        tooltip: {
          trigger: "axis"
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: "category",
          data: datasone
        },
        yAxis: {
          type: "value"
        },
        series: [
          {
            data: datastwo,
            type: "line"
          }
        ]
      });
    },
    //第三块
    select_third_datas() {
      getReport_strategy_caps(this.third_form).then(res => {
        let drawChart_third_dataone = res.result[0];
        let drawChart_third_datatwo = res.result[1];
        drawChart_third_datatwo.forEach(item => {
          item = item * 1;
        });
        this.$nextTick(() => {
          this.drawChart_third(
            drawChart_third_dataone,
            drawChart_third_datatwo
          );
        });
      });
    },
    drawChart_third(onedatas, twodatas) {
      let myChart_third = this.$echarts.init(
        document.getElementById("main_third")
      );
      myChart_third.setOption({
        title: {
          text: "总资金占用",
          left: "center"
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross"
          }
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: onedatas
        },
        yAxis: {
          type: "value"
        },
        series: [
          {
            data: twodatas,
            type: "line",
            areaStyle: {}
          }
        ]
      });
    }
  }
};
</script>
<style scoped>
.el-pagination {
  text-align: center;
}
</style>
